<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单文字弹幕</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <style>
        /* 弹幕容器 */
        #danmaku-container {
            position: relative;
            overflow: hidden;
            height: 70vh;
            background-color: #000;
        }
        
        /* 弹幕样式 */
        .danmaku {
            position: absolute;
            white-space: nowrap;
            color: white;
            font-size: 20px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
            animation: danmakuMove linear forwards;
        }
        
        /* 弹幕动画 */
        @keyframes danmakuMove {
            from { transform: translateX(100%); }
            to { transform: translateX(-100%); }
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-6">
        <header class="text-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">文字弹幕</h1>
            <p class="text-gray-600">发送你的弹幕，与大家互动</p>
        </header>
        
        <!-- 弹幕显示区域 -->
        <div id="danmaku-container" class="rounded-lg mb-4 shadow-lg">
            <!-- 弹幕会通过JS动态添加到这里 -->
            <div class="absolute inset-0 flex items-center justify-center text-gray-500">
                <p>发送第一条弹幕吧！</p>
            </div>
        </div>
        
        <!-- 发送弹幕区域 -->
        <div class="flex flex-col sm:flex-row gap-3">
            <input 
                type="text" 
                id="danmaku-input" 
                placeholder="输入弹幕内容..." 
                class="flex-grow px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
            <div class="flex gap-2">
                <select id="color-select" class="px-3 py-2 rounded-lg border border-gray-300 bg-white">
                    <option value="white">白色</option>
                    <option value="red">红色</option>
                    <option value="yellow">黄色</option>
                    <option value="green">绿色</option>
                    <option value="blue">蓝色</option>
                    <option value="purple">紫色</option>
                </select>
                <button id="send-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
                    发送
                </button>
            </div>
        </div>
        
        <div class="mt-4 text-center text-sm text-gray-500">
            <p>按Enter键也可以发送弹幕</p>
        </div>
    </div>

    <script>
        // DOM元素
        const danmakuContainer = document.getElementById('danmaku-container');
        const danmakuInput = document.getElementById('danmaku-input');
        const colorSelect = document.getElementById('color-select');
        const sendBtn = document.getElementById('send-btn');
        
        // 示例弹幕数据
        const exampleDanmakus = [
            "这个弹幕功能好棒！",
            "大家好呀",
            "我来了",
            "哈哈哈",
            "666",
            "支持一下",
            "不错不错"
        ];
        
        // 页面加载时随机显示一些示例弹幕
        window.addEventListener('load', () => {
            // 延迟显示示例弹幕，营造自然效果
            exampleDanmakus.forEach((text, index) => {
                setTimeout(() => {
                    const randomColor = ['white', 'red', 'yellow', 'green', 'blue', 'purple'][
                        Math.floor(Math.random() * 6)
                    ];
                    sendDanmaku(text, randomColor);
                }, index * 800);
            });
        });
        
        // 发送按钮点击事件
        sendBtn.addEventListener('click', () => {
            sendCurrentDanmaku();
        });
        
        // 回车键发送弹幕
        danmakuInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendCurrentDanmaku();
            }
        });
        
        // 发送当前输入的弹幕
        function sendCurrentDanmaku() {
            const text = danmakuInput.value.trim();
            if (text) {
                const color = colorSelect.value;
                sendDanmaku(text, color);
                // 清空输入框
                danmakuInput.value = '';
                // 聚焦输入框
                danmakuInput.focus();
            }
        }
        
        // 发送弹幕
        function sendDanmaku(text, color) {
            // 移除初始提示
            const initialPrompt = danmakuContainer.querySelector('div');
            if (initialPrompt) {
                danmakuContainer.removeChild(initialPrompt);
            }
            
            // 创建弹幕元素
            const danmaku = document.createElement('div');
            danmaku.className = 'danmaku';
            danmaku.textContent = text;
            danmaku.style.color = color;
            
            // 随机位置和速度
            const containerHeight = danmakuContainer.clientHeight;
            const randomTop = Math.floor(Math.random() * (containerHeight - 40)); // 避免超出容器
            const duration = 8 + Math.random() * 7; // 8-15秒
            
            // 设置弹幕位置和动画
            danmaku.style.top = `${randomTop}px`;
            danmaku.style.animationDuration = `${duration}s`;
            
            // 添加到容器
            danmakuContainer.appendChild(danmaku);
            
            // 动画结束后移除弹幕元素
            setTimeout(() => {
                if (danmaku.parentNode) {
                    danmaku.parentNode.removeChild(danmaku);
                }
            }, duration * 1000);
        }
    </script>
</body>
</html>
